<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="/sys/base :: headFragment(~{::title},~{::link},~{::style})"></head>
<body>
<div class="layui-card" style="margin:3px;">
    <!-- TODO 顶部按钮 -->
    <div class="layui-card-header" style="padding:5px 5px 0;line-height:38px;">
        <button class="layui-btn layui-btn-sm layui-btn-radius" data-type="openAll">
            <i class="layui-icon layui-icon-down"></i> 全部展开
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-radius" data-type="closeAll">
            <i class="layui-icon layui-icon-right"></i> 全部关闭
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-radius" data-type="insert">
            <i class="layui-icon layui-icon-add-circle"></i> 添加一级菜单
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-radius" data-type="batchDelete">
            <i class="layui-icon layui-icon-delete"></i> 批量删除
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-radius" data-type="refresh">
            <i class="layui-icon layui-icon-refresh"></i> 刷新
        </button>
    </div>
    <!-- TODO 自定义TreeTable -->
    <div class="layui-card-body" style="padding:0 5px 5px">
        <table class="layui-table layui-form" id="permissionTable"></table>
    </div>
</div>

<script th:replace="/sys/base :: scriptFragment"></script>
<script type="text/javascript" th:inline="javascript">
    layui.extend({
        treeTableLI: '{/}' + $.getHostLI() + $.getProjectNameLI() + '/static/js/layuiExpand/treeTableLI' // TODO 新增自定义treeTable插件
    });
    layui.use(['jquery', 'layer', 'form', 'treeTableLI'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var treeTable = layui.treeTableLI; // TODO treeTable对象
        //
        var permissionTable = treeTable.render({
            elem: '#permissionTable'
            , icon_key: 'permissionName'
            , is_checkbox: true
            , url: $.getProjectNameLI() + '/sys/permission/list'
            , cols: [
                {key: 'permissionName', title: '名称'}
                , {
                    key: 'category', title: '类型', width: '100px', template: function (item) {
                        if (item.grade === 1) {
                            return '<span>一级菜单</span>';
                        } else if (item.grade === 2) {
                            return '<span>二级菜单</span>';
                        } else if (item.grade === 3) {
                            return '<span style="color:#d2d2d2;">三级按钮</span>';
                        }
                    }
                }
                , {key: 'action', title: '指令'}
                , {key: 'sort', title: '排序', width: '40px', align: 'center'}
                , {key: 'createUserAccount', title: '创建人', width: '100px'}
                , {key: 'createTime', title: '创建时间', width: '140px', align: 'center'}
                , {
                    key: 'active', title: '状态', width: '100px', align: 'center', template: function (item) {
                        return "<input type='checkbox' name='active' value='" + item.id + "' lay-skin='switch' lay-text='开启|禁用' lay-filter='active' " + (item.active === 1 ? 'checked' : '') + ">";
                    }
                }
                , {
                    title: '操作', width: '120px', align: 'center', template: function (item) {
                        return '<a class="layui-btn layui-btn-sm layui-btn-primary" lay-filter="insert">添加</a>' +
                            '<a class="layui-btn layui-btn-sm layui-btn-primary" lay-filter="update">编辑</a>';
                    }
                }
            ],
            end: function (e) {
                form.render(); // 实现动态渲染表单元素
            }
        });

        /**
         * 监听【顶部按钮】
         */
        $('.layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        var active = {
            openAll: function () { // TODO 全部展开
                treeTable.openAll(permissionTable);
            },
            closeAll: function () { // TODO 全部关闭
                treeTable.closeAll(permissionTable);
            },
            refresh: function () { // TODO 刷新
                window.location.reload();
            },
            insert: function () { // TODO 添加一级菜单
                openSysModifyDialog("添加一级菜单", "/sys/permission/toModify/insert/0", "540,570");
            },
            batchDelete: function () { // TODO 批量删除
                var row = treeTable.checked(permissionTable);
                if (row.length === 0) {
                    layer.msg("请先选择需要删除的数据", {time: 1500});
                } else {
                    var ids = [];
                    row.forEach(function (item) {
                        ids.push(item);
                    });
                    sysDelete("/sys/permission/delete", {id: ids.join(",")});
                }
            }
        };

        /**
         * 监听表格行中的【状态】按钮
         */
        form.on('switch(active)', function (obj) {
            sysUpdate('/sys/permission/saveModify/update', {id: this.value, active: obj.elem.checked ? 1 : 2});
        });
        /**
         * 监听表格行中的【添加】按钮
         */
        treeTable.on('tree(insert)', function (data) {
            if (data.item.grade === 3) {
                layer.msg("三级按钮禁止添加菜单", {time: 1500});
            } else {
                openSysModifyDialog('添加菜单', '/sys/permission/toModify/insert/' + data.item.id, '540,570'); // TODO 打开添加弹框
            }
        });
        /**
         * 监听表格行中的【编辑】按钮
         */
        treeTable.on('tree(update)', function (data) {
            openSysModifyDialog('编辑菜单', '/sys/permission/toModify/update/' + data.item.id, '540,570'); // TODO 打开编辑弹框
        });
    });
</script>

</body>
</html>